<template>
  <div>
    <div class="uni-flex" style="line-height: 150px;" v-if="weather.today.temperature !== ''">
      <img style="width: 150px; margin-right: 30px;" :src="'../img/weather/' + weather.today.fa + '.png'" />
      <span>{{ weather.today.temperature }}℃</span>
      <span style="margin-left: 30px;">{{ weather.today.weather }}</span>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import request from '@/utils/request4screen'
  Vue.prototype.$http = request // ajax请求方法
  export default {
    name: "Weather",
    props: {
      city: {
        type: String,
        default: "上海市"
      }
    },
    data() {
      return {
        weather: {
          sk: {
            wind_direction: '',
            wind_strength: ''
          },
          today: {
            temperature: '',
            weather: '',
            fa: ""
          }
        }
      }
    },
    mounted() {
      this.$nextTick(()=>{
        this.queryWeather()
      })
    },
    methods: {
      queryWeather() {
        this.$http({
          url: 'http://10.242.182.32/wpt/api/getWeather',
          method: 'get',
          params: {
            cityname: this.city
          }
        }).then((data) => {
          if (data && data.success) {
            console.log('weather=='+data)
            var GetWeatherResult = JSON.parse(data.data).GetWeatherResult
            if (GetWeatherResult && GetWeatherResult.error_code === '0') {
              this.weather = GetWeatherResult.result
            }
          } else {
            setTimeout(() => {
              this.queryWeather()
            }, 5000)
          }
        });
      }
    }
  }
</script>

<style scoped="scoped">
  .uni-date {
    font-size: 110px;
    line-height: 145px;
    letter-spacing: 1px;
    color: #FFFFFF;
    text-align: left;
    font-weight: bolder;
  }
</style>
